{extend name="main"}
{block name="style"}
<style type="text/css">
	.el-tree-node__content {
	    display: flex;
	    align-items: center;
	    height: 40px;
	    cursor: auto;
	}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: .5rem;
	}
	.w-40px{width: 40px;}
	.w-80px{width: 80px;}
	.w-180px{width: 180px;}
	.w-120px{width: 120px;}
	.w-240px{width: 240px;}
	.minw-200px{min-width: 200px;}
</style>
{/block}
{block name="body"}
<div class="bg-white px-3 pb-3">
	<div class="mb-3">
		<el-tabs v-model="activeName">
			<el-tab-pane name="xy_app_config">
				<span slot="label">APP配置<i class="el-icon-caret-right ml-1"></i></span>
			</el-tab-pane>
			<el-tab-pane label="APP版本" name="app_version"></el-tab-pane>
		</el-tabs>
	</div>
	<div class="pb-3">
        <el-button
            type="success"
            size="mini"
            @click="window.open('/client/app/add_version')">
            更新APP版本
        </el-button>
	</div>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
		    <el-table-column
		      prop="version_name"
		      label="版本"
		      width="200">
		      <template slot-scope="scope">
		      <div class="font-weight-bold">{{scope.row.version_code}}</div>
		      <div>{{scope.row.version_name}}</div>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="平台"
		      width="200">
		      <template slot-scope="scope">
		      	<el-link :href="'{:config('web.imgurl')}'+scope.row.path" class="mr-1" v-if="scope.row.is_android" target="_blank" :underline="false">Android</el-link>
		      	<el-link :href="scope.row.wgt?'{:config('web.imgurl')}'+scope.row.path:scope.row.ios_url" class="mr-1" v-if="scope.row.is_ios" target="_blank" :underline="false">iOS</el-link>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="类型"
		      width="120">
		      <template slot-scope="scope">
		      <span class="text-danger" v-if="scope.row.wgt">资源包</span>
		      <span class="text-success" v-else>安装包</span>
		      </template>
		    </el-table-column>
	      	<el-table-column
	        label="更新"
	        width="120">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">开启</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">关闭</el-button>
				</transition>
		      </template>
	      	</el-table-column>
	      	<el-table-column
	        label="强制更新"
	        width="120">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.force==1 || scope.row.force==2" 
		      		@click="setForce(scope.row);" 
		      		:loading="scope.row.force==2">是</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.force==0 || scope.row.force==2" 
		      		@click="setForce(scope.row);" 
		      		:loading="scope.row.force==2">否</el-button>
				</transition>
		      </template>
	      	</el-table-column>
		    <el-table-column
		      prop="desc"
		      label="更新说明">
		      <template slot-scope="scope">
		      	<div class="small" v-html="XYBase.strntobr(scope.row.desc)"></div>
		      </template>
		    </el-table-column>
	      <el-table-column
	        label="创建时间"
	        width="200">
		      <template slot-scope="scope">
		      	<div class="small">
		          <div>{{ scope.row.create_time }}</div>
		      	</div>
		      </template>
	      </el-table-column>
		    <el-table-column
		      label="/"
		      width="120">
		      <template slot-scope="scope">
		        <el-button
		            type="danger"
		            plain
		            round
		            size="minism"
		            :loading="scope.row.loading"
		            @click="delCate(scope.row,scope.$index)">
		            删除
		        </el-button>
		      </template>
		    </el-table-column>
		</el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			activeName:'app_version',
			search:{
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    activeName(val,oldVal){
		    	this.setFormItemShow(val,oldVal);
		    }
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			setFormItemShow(val,oldVal){
		    	switch(val){
		    		case 'xy_app_config':
		    		this.activeName=oldVal;
		    		window.location.href="/setting/appConfig";
		    		break;
		    	}
			},
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/client/app/setVersionStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	setForce(data){
	    		if (data.force==2) return;
	    		var force=1,oldStatus=data.force;
	    		if (data.force) force=0;
	    		data.force=2;
	    		$.getJSON('/client/app/setVersionForce/'+data.id+'/'+force,function(ret){
	    			data.force=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.force=force;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	delCate(data,index){
	    		var _this=this;
		        _this.$confirm('此操作将永久删除该更新, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	data.loading=1;
		        	$.getJSON('/client/app/del_version/'+data.id,function(ret){
		        		data.loading=0;
		        		if (ret) {
		        			if (ret.code == 0) {
		        				_this.tableData.splice(index,1);
		        			}else{
		        				XYBase.msg(ret.msg);
		        			}
		        		}else{
							XYBase.error(XYBase.config.system_network_error);
		        		}
		        	});
		        }).catch(() => {
    				XYBase.msg('已取消删除');
		        });
	    	},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
	});
</script>
{/block}